Sigma Web Development

📒 Notes & Demo: CSS Sizing Units

• 1. Pixels (px)

  Fixed, absolute unit; exact control over element size.

  width: 200px; height: 100px;

  Hinglish: px ek fixed unit hai – screen chhoti ho ya badi, box ka size same rahega. Absolute control deta hai developer ko.

  200px × 100px

• 2. Root em (rem)

  Relative to root (html) font-size; consistent scaling.

  width: 12rem; height: 6rem;

  Hinglish: rem root font-size ke hisaab se size leta hai. Agar root size 16px hai, to 1rem = 16px. Har jagah consistency rehti hai.

  12rem × 6rem

• 3. EM (em)

  Relative to parent font-size; useful for component-based scaling.

  font-size:20px; width:10em; height:5em;

  Hinglish: em current element ya parent ke font-size ke basis par hota hai. Iska scale parent ke saath change hota hai.

  10em × 5em

• 4. Percentage (%)

  Relative to parent element’s dimensions; fluid layouts.

  width:50%; height:20%;

  Hinglish: % value parent ke dimensions ka percent hoti hai. Responsive layouts ke liye best hai.

  50% × 20%

• 5. Viewport Width (vw)

  Percentage of viewport’s width; responsive to window size.

  width:25vw; height:10vw;

  Hinglish: vw ka matlab hota hai “viewport width.” 1vw = 1% of current browser width.

  25vw × 10vw

• 6. Viewport Height (vh)

  Percentage of viewport’s height; useful for full-screen sections.

  width:30vh; height:30vh;

  Hinglish: vh ka matlab hota hai “viewport height.” 1vh = 1% of browser ki height.

  30vh × 30vh

• 7. Viewport Minimum (vmin)

  Based on smaller of viewport width/height; maintains aspect ratio.

  width:30vmin; height:30vmin;

  Hinglish: vmin viewport ke chhote dimension (width ya height) par based hota hai – jisse consistent aspect ratio bana rahta hai.

  30vmin × 30vmin

• 8. More Units

  Other CSS units include vmax, ch, ex, and more.

  Hinglish: Aur bhi units hote hain jaise vmax (badi viewport side), ch (character width), ex (x-height of font) – ye sab explore karne layak hai!

  Explore on CSS Units Reference.